<template>
	<scroll-view scroll-y class="content  ">
		<view class="padding background">
			
			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">{{ userInfo.money || '0' }}</text>
					<text>可用余额</text>
				</view>
				<view class="tj-item">
					<text class="num">{{ userInfo.cash || '0' }}</text>
					<text>可用购物积分</text>
				</view>
			</view>

			<view class="recharge">
				<view class="rechargemain">
					<view class="rechargeTitle">用户手机号:</view>
					<view class="rechargeContent">
						<input
							type="number"
							:value="mobile"
							placeholder="请输入用户手机号"
							placeholder-class="input-empty"
							maxlength="11"
							data-key="mobile"
							@input="inputChange"
							style="height:32px"
						/>
					</view>
				</view>
				
				<view class="rechargemain">
					<view class="rechargeTitle">数量:</view>
					<view class="rechargeContent">
						<input
							type="number"
							:value="money"
							placeholder="请输入数量"
							placeholder-class="input-empty"
							maxlength="11"
							data-key="money"
							@input="inputChange"
							style="height:32px"
						/>
					</view>
				</view>
				
				<view class="rechargemain">
					<view class="rechargeTitle">支付密码:</view>
					<view class="rechargeContent">
						<input
							type="number"
							:value="password"
							placeholder="请输入支付密码"
							placeholder-class="input-empty"
							maxlength="6"
							password
							data-key="password"
							@input="inputChange"
							style="height:32px"
						/>
					</view>
				</view>
				
				<view class="exit-button"><button class="exit-button-text" @tap="toRecharge" :disabled="submiting">确认转出</button></view>
				
				<text class="recharge-button">{{tipInfo.tips3_con}}</text>
				
			</view>
			
		</view>
	</scroll-view>
</template>
<script>
export default {
	data() {
		return {
			token: '',
			userInfo: {},
			tipInfo: {},
			
			money: '',
			mobile: '',
			password: '',
			submiting: false,
		};
	},
	onLoad(option) {
		
	},
	onShow() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}
		
		//获取用户信息
		this.getmedate();
		//获取提示信息
		this.gettipinfo();
	},
	methods: {
		//获取用户信息
		async getmedate() {
			const param_userinfo = {
				token: this.token
			};
			
			await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						console.log('userinfo', res.data.data);
						this.userInfo = res.data.data;
					}
				}
			});
		},
		//获取提示信息
		async gettipinfo() {
			const param_userinfo = {
				token: this.token
			};
			await this.$http.request('User', 'info3', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.tipInfo = res.data.data;
					}
				}
			});
		},

		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		
		//提交
		toRecharge() {
			this.submiting = true;
			const { mobile,money,password } = this;
			
			/* 数据验证模块*/
			if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(mobile)) {
				this.$helper.toast('手机号不合法');
				this.submiting = false;
				return;
			}
			
			let regpr = /^[0-9]+$/;
			if (!regpr.test(money)) {
				this.$helper.toast('数量格式错误', '', '/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			
			if (!password) {
				this.$helper.toast('支付密码不能为空');
				this.submiting = false;
				return;
			}
		
			const param = {
				token: this.token,
				mobile: mobile,
				money: money,
				paypassword:password,
			};
			
			this.$http.request('User', 'moneyexchangecash', 'POST', param, res => {
				this.submiting = false;
				if (res.status == 1) {
					if (res.data.error == 0) {
						// 兑换成功
						this.$helper.toast('转出成功', 'sucess');
						//返回前一页
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/money/money'
							});
						}, 500);
					}
				}
			});
				
		},
		
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffff;
}
%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}
.content {
	height: calc(100vh);
	// 全局两边间距
	.padding {
		padding: 0 30upx;
	}
	
	.tj-sction {
		background: url(/static/images/money_bg.png) no-repeat;
		background-size: cover;
		@extend %section;
		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #ffffff;
		}
		.num {
			font-size: 36upx;
			color: #ffffff;
			margin-bottom: 8upx;
		}
	}

	// 金额开始
	.money {
		padding: 30upx;
		width: 100%;
		height: 250upx;
		background: url(/static/images/money_bg.png) no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
		position: relative;

		.money-a {
			margin: 10upx 0;
		}

		.money-total {
			font-size: 24upx;
			color: #e4e7ed;
		}

		.withdrawsubmit {
			position: absolute;
			top: 40upx;
			right: 50upx;
		}

		.withdrawlist {
			position: absolute;
			top: 150upx;
			right: 50upx;
		}
	}

	.recharge {
		.rechargemain{
			background: #efefef;
			border-radius: 20upx;
			padding-top: 10upx;
			padding-bottom: 10upx;
			margin-top: 20upx;
		}
		
		.rechargeTitle {
			margin-top: 20upx;
			padding-left: 20upx;
			line-height: 40upx;
			height: 30upx;
			color: #ff0000;
			font-size: 30upx;
		}
		
		.rechargeContent {
			padding: 10upx 10upx 0upx 10upx;
			background: #efefef;
			input{
				padding: 0upx 10upx;
			}
		}
	
		.recharge-button {
			display: block;
			padding: 20upx 0upx;
			color: #fa436a;
			font-size: 24upx;
		}
	
		.exit-button-text {
			height: 76upx;
			line-height: 76upx;
			border-radius: 10px;
			margin-top: 20upx;
			background: $uni-color-primary;
			color: #fff;
			font-size: $font-lg;
		}
	}
	

}
</style>
